﻿<!DOCTYPE html>
<html>
<head>
    <meta name="renderer" content="webkit" charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>Secret Radio</title>
    <meta content="Secret Radio" name="description">
    <meta content="Secret Radio" name="keywords">
    <link rel="stylesheet" href="css/min/bootstrap.min.css" />
    <link rel="stylesheet" href="css/nor/index.css" />
</head>
<body style="display:none;">
    <div id="zone_left" onselectstart="return false;">
        <div style="height:150px;margin-left:10px;">
            <img style="float:left;width: 90px;padding-top: 8px;" src="img/logo.png" /><div style="float:left;color:orange; font-size:30px;font-weight:900;margin-top:30px;">秘密电台</div>
            <div style="clear:both;color:gray;text-align:center;">发一条给世界，会有无数条给你！</div>
        </div>
        <div style="height:75px;">
            <div class="input-group">
                <span class="input-group-addon" style="color:orange;">昵称</span>
                <input id="inp_nickname" type="text" maxlength="10" class="form-control">
                <span id="btn_getnick" class="input-group-btn"><button class="btn btn-default" type="button"><span style="color:orange;" class="glyphicon glyphicon-refresh"></span></button></span>
                <span id="btn_inroom" class="input-group-btn"><button class="btn btn-default" type="button"><span style="color:green;" class="glyphicon glyphicon-home"></span></button></span>
            </div>
            <div id="user_count" class="list-group-item list-group-item-success" style="cursor:pointer;"><span id="nowusers_count" class="badge" style="background-color:green;"></span><span style="margin-right:5px;" class="glyphicon glyphicon-comment"></span>当前在线人数</div>
        </div>
        <div id="user_list" class="list-group" style="overflow-y:auto;"></div>
    </div>
    <div id="zone_center" style="display:none; float:left;margin-left:10px;margin-top:10px;">
        <div id="div_msgpanel" class="panel panel-success">
            <div class="panel-heading">
                <div class="panel-title">
                    <span id="msg_title" style="font-weight:900;">&nbsp;</span>
                    <img id="msg_tips" title="声音提醒" style="cursor:pointer;width:25px;float:right;" src="img/sound_on.png" />
                    <img id="msg_clear" title="消息清空" style="cursor:pointer;width:25px;float:right;margin-right:15px;" src="img/msgclear.png" />
                    <img id="msg_back" title="消息撤回" style="cursor:pointer;width:25px;float:right;margin-right:15px;" src="img/msgback.png" />
                    <img id="sharelink" title="分享链接" style="cursor:pointer;width:25px;float:right;margin-right:15px;" src="img/share.png" />
                </div>
                <audio id="msg_sound" src="plug/tip.mp3"></audio>
            </div>
            <div id="div_msgbox" class="panel-body" style="overflow-y:auto;"></div>
            <div id="div_privmsg" class="panel-body" style="overflow-y:auto;display:none;"></div>
        </div>
        <div style="position:relative;left:0px;bottom:10px;">
            <div style="float:left;margin-top:4px;">
                <a class="emoji" style="margin-right:10px;" data-toggle="popover" data-placement="top" title="表情"><img style="outline-width:40px;" class="img_emoji" src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/huanglianwx_thumb.gif" /></a>
                <a id="a_uploadimg" style="margin-right:10px;display: none;" title="上传图片"><img style="padding-top:4px;" class="img_uploadimg" src="img/uploadpic.png" /></a>
                <a id="a_uploadfile" style="margin-right:10px;" title="上传文件"><img src="img/uploadfile.png" /></a>
                <input id='uploading_file' type='file' style='display:none;' />
                <a id="a_doodle" style="margin-right:10px;" title="涂鸦"><img src="img/doodle.png" /></a>
                <a style="cursor:default;margin-right:10px;">|</a>
                <a id="a_getphoto" style="margin-right:10px;" title="拍照"><img src="img/camera.png" /></a>
                <a id="a_record" style="margin-right:10px;" title="录音"><img src="img/record.png" /></a>
            </div>
            <div style="float:right;">
                <span style='color:gray;font-size:12px;'>ctrl+回车发送</span>
                <button id="btn_say" type="button" class="btn btn-success">我要说几句</button>
            </div>
        </div>
        <div style="clear:both">
            <textarea id="inp_say" maxlength="500" placeholder="点击左侧用户可私聊" class="form-control" style="height:125px;resize:none;"></textarea>
        </div>
    </div>
    <div id="zone_right">
        <div class="hotrooms_title" style="font-size:16px;font-weight:900;color:green;margin-top:20px; margin-left:10px;height:35px;border-bottom:1px solid #d6e9c6;">
        	热门房间
        	<button onclick="click_hotroom()" style="margin-left: 50px;display: none">创建房间</button>
        </div>
        <div id="hotrooms" style="overflow-y:auto;">
        	<div class="class_hotrooms" onclick="click_hotroom('宇宙世界无敌asf')">
				<div style="color:#ffe6b8;margin-right:5px;" class="glyphicon glyphicon-home"></div>
				<div class="label label-info" style="margin-right:5px;">0</div>
					宇宙世界无敌asf
			</div>
        </div>
    </div>
    <script type="text/javascript" src="js/min/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/min/nickname.js"></script>
    <script type="text/javascript" src="js/min/layer/layer.js"></script>
	<script type="text/javascript" src="js/cim/message.js"></script>
	<script type="text/javascript" src="js/cim/replybody.js"></script>
	<script type="text/javascript" src="js/cim/sentbody.js"></script>
	<script type="text/javascript" src="js/cim/cim.web.sdk.js"></script>
	
	<script type="text/javascript" src="js/min/emoji.js" ></script>
	<script type="text/javascript" src="js/min/index.js" ></script>
	
	<script>
	$(function(){
	    ids = generateUUID();
		index_emoji = 0,
		sel_userid = 0,
		init_initEmoji();
		var nickName = getRandomChineseWord();
		$("#inp_nickname").val(nickName);
		$("#btn_getnick").click(function(){
            nickName = getRandomChineseWord();
            $("#inp_nickname").val(nickName);
		});
		doLogin();		
	});
	
	document.onkeydown = function (e) { // 回车提交表单
	    // 兼容FF和IE和Opera
	    var theEvent = window.event || e;
	    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
	    if (code == 13) {
	       	$("#btn_say").click();
	    }
	}
	function doLogin(){
		/**登录成功后创建连接****/
		CIMPushManager.connect();
	}
	function onConnectFinished(){
	   CIMPushManager.bind($("#inp_nickname").val());
    }

	function sendMessage(message,action){
	    fun_loading(!0);
		var body = {
			  "action": action,
			  "content": message,
			  "extra": "string",
			  "receiver": $("#inp_nickname").val(),
			  "sender": ids
		}
		 $.ajax({
				type:"POST",
				url:"http://127.0.0.1:8888/sendAll",
				contentType: "application/json", //必须这样写
				dataType:"json",
				data:JSON.stringify(body),//schoolList是你要提交是json字符串
				success:function (data) {
                    fun_loading(!1);
					$("#inp_say").val("");
				},
                error:function(){
				    fun_loading(!1);
				    layer.msg("发送失败");
                }
			})
		
	}
	
	
	 /** 当收到请求回复时候回调  **/
   function onReplyReceived(reply)
   {
	if(reply.key=="client_bind"){
        var user = JSON.parse(reply.data.body);
        $("#nowusers_count").html(user.length);
        $("#user_list").html("");
        for(var kk in  user){
            if(user[kk].user != $("#inp_nickname").val()){
                var html = '<a id="userid_'+user[kk].channl+'" class="list-group-item" onclick="sendPersion(this)" style="color:black" ><span class="badge"></span><span style="margin-right:5px;" class="glyphicon glyphicon-user"></span><span class="nickname">'+user[kk].user+'</span></a>'
                $("#user_list").append(html);
            }
        }
    }else if(reply.key == "client_closed"){
        var user = JSON.parse(reply.data.body);
        $("#nowusers_count").html(user.length);
        $("#user_list").html("");
        for(var kk in  user){
            if(user[kk].user != $("#inp_nickname").val()){
                var html = '<a id="userid_'+user[kk].channl+'" class="list-group-item" onclick="sendPersion(this)" style="color:black" ><span class="badge"></span><span style="margin-right:5px;" class="glyphicon glyphicon-user"></span><span class="nickname">'+user[kk].user+'</span></a>'
                $("#user_list").append(html);
            }
        }
    }else {
		var message = JSON.parse(reply.data.body);
		var content = "";
		if(message.action == "string"){
            var image  = emoji[message.content];
            if(image == undefined ){
                content = message.content;
            }else{
                content =  '<img src="'+image+'" style="max-width: 500px;max-height: 250px;">';
            }
		}else{
            var image  = message.content;
			content =  '<img src="'+image+'" style="max-width: 500px;max-height: 250px;">';
		}
        timestamp4 = new Date(message.timestamp);
        time = timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8);
		d = message.sender == ids;
		var htmls =  '<div class="chatbox" style="text-align:' + (d ? "right": "left") + '"><div style="text-align:'+ (d ? "right": "left") +'"><span style="font-weight:900;color:#6d6d6d">'+ message.receiver+'</span> <span style="color:#d2d2d2;">'+time+'</span></div><div class="chatarrow" style="'+ (d ? "right:5px;border-bottom: 8px solid #ffe6b8;": "left:5px;border-bottom: 8px solid #cfffcf;") +'"></div><div id="'+message.timestamp+'" class="chat '+(d ? " selfchat": "")+'" style="max-width:'+($("#div_msgpanel").width() - 50)+'px;">'+content+'<br></div></div><div class="clearboth"></div>';
		$("#div_msgbox").append(htmls);
		$("#div_msgbox").scrollTop($("#div_msgbox")[0].scrollHeight);
	}
   }
	</script>
</body>
</html>
